<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .divAll {
            width: 800px;
            font-family: '黑体';
            margin: 50px auto;
        }

        #titles {
            font-weight: bold;
            font-size: 18px;
            height: 50px;
            line-height: 50px;
            background: #FFF9F3;
            text-align: center;
            border: 1px solid #CCC;
            ;
        }

        #contents {
            margin-top: 20px;
            background: #FFF9F3;
            border: 1px solid #CCC;
            ;
        }

        #form-itemGroup {
            padding: 10px;
        }

        #form-itemGroup label {
            display: inline-block;
            width: 100px;
            height: 32px;
            line-height: 32px;
            color: #666;
            text-align: right;
        }

        #form-itemGroup .userName {
            width: 200px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #CCC;
        }

        #form-itemGroup .default {
            width: 200px;
            height: 32px;
            line-height: 32px;
            color: #999;
        }

        #form-itemGroup .error {
            height: 32px;
            line-height: 32px;
            color: #F00;
        }

        #form-itemGroup .success {
            height: 32px;
            line-height: 32px;
            color: #096;
        }

        .divBtn {
            margin-top: 20px;
            margin-left: 200px;
            width: 100px;
            height: 32px;
            line-height: 32px;
            background-color: #F93;
            margin-bottom: 10px;
            color: #ffffff;
            font-weight: bold;
            border: none;

            
        }
        .focused {
    background: #abcdef;
}
    </style>
    <!-- 引入文档 -->
    <script src="https://code.jquery.com/jquery-latest.js"></script>


    <script>
        // 总验证
        function checkForm() {
            //调用方法
            var username = checkUserName();
            var password = checkPassword();
            var confirmpassword = confirmPassword();
            var phone = checkPhone();

            return username && password && confirmpassword && phone;

        }
        //验证用户名
        function checkUserName() {
            var username = document.getElementById("userName");
            var errname = document.getElementById("nameErr");
            var pattern = /^\w{3,}$/;

            if (username.value.length == 0) {
                errname.innerHTML = "用户不能为空";
                errname.className = "error";
                return false;
            }
            if (!pattern.test(username.value)) {
                errname.innerHTML = "用户名不符合规范";
                errname.className = "error";
                return false;
            }
            else {
                errname.innerHTML = "OK";
                errname.className = "success";
                return true;

            }
        }
        //验证密码
        function checkPassword() {
            var userpassword = document.getElementById("userPasword");
            var errpassword = document.getElementById("passwordErr");
            var pattern = /^\w{4,8}$/;  //4-8位密码
            if (!pattern.test(userpassword.value)) {
                errpassword.innerHTML = "密码不正确";
                errpassword.className = "error";
                return false;
            }
            else {
                errpassword.innerHTML = "OK";
                errpassword.className = "success";
                return true;
            }
        }
        //验证确认密码
        function confirmPassword() {
            var userconpassword = document.getElementById("userConfirmPasword");
            var errconpassword = document.getElementById("conPasswordErr");
            var userpassword = document.getElementById("userPasword");

            if (userpassword.value != userconpassword.value || userconpassword.value.length == 0) {
                errconpassword.innerHTML = "密两次输入的密码不一致";
                errconpassword.className = "error";
                return false;

            }
            else {
                errconpassword.innerHTML = "OK";
                errconpassword.className = "success";
                return true;

            }
        }
        //验证手机号
        function checkPhone() {
            var userphone = document.getElementById("userPhone");
            var errphone = document.getElementById("phoneErr");
            var pattern = /^1{3456789}\d{9}$/;   //验证手机号
            if (!pattern.test(userphone.value)) {
                errphone.innerHTML = "手机号不正确";
                errphone.className = "error";
                return false;
            }
            else {
                errphone.innerHTML = "OK";
                errphone.className = "success";
                return true;
            }
        }
        

    </script>
</head>

<body>
    <div class="divAll">
        <div id="titles">新用户注册</div>
        <div id="contents">
            <h3>基本信息</h3>
            <hr width="95%" color="#f2f2f2" />
            <form action="#" onsubmit="return checkForm()">   <!-- 返回方法的true false   返回false 表单不提交 只有true时候提交-->  
                
                <div id="form-itemGroup">
                    <div id="f1">
                    <label for="userName">用户名：</label>
                    <input type="text" id="userName" class="userName" onblur="checkUserName()"
                        oninput="checkUserName()">
                    <span class="default" id="nameErr">请输入至少3位的用户名</span>
                  </div>
                </div>
                <div id="form-itemGroup">
                    <div id="f2">
                    <label for="userPasword">密码：</label>
                    <input type="password" id="userPasword" class="userName" onblur="checkPassword()"
                        oninput="checkPassword()">
                    <span class="default" id="passwordErr">请输入4到8位的密码</span>
                </div>
                </div>
                <div id="form-itemGroup">
                    <div id="f3">
                    <label for="userConfirmPasword">确认密码：</label>
                    <input type="password" id="userConfirmPasword" class="userName" onblur="confirmPassword()"
                        oninput="confirmPassword()">
                    <span class="default" id="conPasswordErr">请再输入一遍密码</span>
                </div>
                </div>
                <div id="form-itemGroup">
                    <div id="f4">
                    <label for="userPhone">手机号码：</label>
                    <input type="text" id="userPhone" class="userName" onblur="checkPhone()" oninput="checkPhone()">
                    <span class="default" id="phoneErr">请输入11位手机号码</span>
                </div>
                </div>
                
                <div>
                    <button type="submit" class="divBtn">注册</button>
                </div>

                <script src="https://code.jquery.com/jquery-latest.js"></script>
                <script>
                    $( "#f1" ).delegate( "*", "focus blur", function( event ) {
                        var elem = $( this );
                        setTimeout(function() {
                           elem.toggleClass( "focused", elem.is( ":focus" ) );
                        }, 0);
                    });
                    $( "#f2" ).delegate( "*", "focus blur", function( event ) {
                        var elem = $( this );
                        setTimeout(function() {
                           elem.toggleClass( "focused", elem.is( ":focus" ) );
                        }, 0);
                    });
                    $( "#f3" ).delegate( "*", "focus blur", function( event ) {
                        var elem = $( this );
                        setTimeout(function() {
                           elem.toggleClass( "focused", elem.is( ":focus" ) );
                        }, 0);
                    });
                    $( "#f4" ).delegate( "*", "focus blur", function( event ) {
                        var elem = $( this );
                        setTimeout(function() {
                           elem.toggleClass( "focused", elem.is( ":focus" ) );
                        }, 0);
                    });
                    </script>
            </form>
        </div>
    </div>

</body>

</html>